import React from 'react';
import { RowFlex } from 'dw-mx-flex';
import { BasicTable } from 'dw-mx-table';

export default function BasicTableDemo() {
    const dataSource = [
        {
            key: 0,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 1,
            date: '2018-03-11',
            amount: 243,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 2,
            date: '2018-04-11',
            amount: 98,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 3,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },{
            key: 4,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },{
            key: 5,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 6,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 7,
            date: '2018-03-11',
            amount: 243,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 8,
            date: '2018-04-11',
            amount: 98,
            type: 'income',
            note: 'transfer',
        },
        {
            key: 9,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },{
            key: 10,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },{
            key: 11,
            date: '2018-02-11',
            amount: 120,
            type: 'income',
            note: 'transfer',
        },
    ]

    const pagination = {
        pageSize:5,
    }

    const columns = [

        {
            title: 'Date',
            dataIndex: 'date',
            width:100
        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            width:200
        },
        {
            title: 'Type',
            dataIndex: 'type',
            width:200
        },
        {
            title: 'Note',
            dataIndex: 'note',
            width:100,
        },
        {
            title: 'Action',
            key: 'action',
            width:1500,
            render: () => <a>Delete</a>,
        },
    ]

    return (
        <RowFlex style={{ height: '100%' }}>
            <BasicTable
                dataSource={dataSource}
                columns={columns}
                heightAdaptive={true}
                pagination={pagination}
                tableNumber={{isShow:true,title:'NO',width:150,align:'right'}}
            />
        </RowFlex>
    )
}
